{% extends "base.html" %}
{% load staticfiles %}
{% block title %}Host Resource{% endblock %}
<!--atsystem-->
        <link rel="stylesheet" href="{% static 'vendors/morris/morris.css' %}">


        <script src="{% static 'vendors/jquery-1.9.1.min.js' %}"></script>
        <script src="{% static 'vendors/jquery.knob.js' %}"></script>
        <script src="{% static 'vendors/raphael-min.js' %}"></script>
        <script src="{% static 'vendors/morris/morris.min.js' %}"></script>

        <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
        <script src="{% static 'vendors/flot/jquery.flot.js' %}"></script>
        <script src="{% static 'vendors/flot/jquery.flot.categories.js' %}"></script>
        <script src="{% static 'vendors/flot/jquery.flot.pie.js' %}"></script>
        <script src="{% static 'vendors/flot/jquery.flot.time.js' %}"></script>
        <script src="{% static 'vendors/flot/jquery.flot.stack.js' %}"></script>
        <script src="{% static 'vendors/flot/jquery.flot.resize.js' %}"></script>

        <script src="{% static 'assets/scripts.js' %}"></script>
{% block content %}






                <!--/span-->
                <div class="span9" id="content">
                    <div class="row-fluid">
                        	<div class="navbar">
                            	<div class="navbar-inner">
	                                <ul class="breadcrumb">
	                                    <i class="icon-chevron-left hide-sidebar"><a href='#' title="Hide Sidebar" rel='tooltip'>&nbsp;</a></i>
	                                    <i class="icon-chevron-right show-sidebar" style="display:none;"><a href='#' title="Show Sidebar" rel='tooltip'>&nbsp;</a></i>
	                                    <li>
	                                        <a href="/admin/">Dashboard</a> <span class="divider">/</span>	
	                                        <a href="/admin/hosts/">Minions</a> <span class="divider">/</span>	
	                                        <a>hresource</a> <span class="divider">/</span>	
	                                    </li>
	                                  <!--  <li>
	                                        <a href="#">Settings</a> <span class="divider">/</span>	
	                                    </li>
	                                    <li class="active">Tools</li>-->
	                                </ul>
                            	</div>
                        	</div>
                    	</div>
                    <div class="row-fluid">
                        <!-- block -->
                        <div class="block">
                            <div class="navbar navbar-inner block-header">
                                <div class="muted pull-left"><b>Disk Status</b></div>
                            </div>
                            <div class="block-content collapse in"> 
			{% for k,v in pl0.items %}
                                <div class="span2">
                                    <div class="chart" data-percent="{{v}}">{{v}}</div>
				   <div class="chart-bottom-heading"><span><b>{{k}}: </b></span><span class="label label-warning" style="background:#ee2c2c;">Used</span>
                                    </div>
                                </div>
                        {% endfor  %}
                                </div>


			{% if dnum > 6 %}
                            <div class="block-content collapse in"> 
			{% for k1,v1 in pl1.items %}
                                <div class="span2">
                                    <div class="chart" data-percent="{{v1}}">{{v1}}</div>
				   <div class="chart-bottom-heading"><span><b>{{k1}}: </b></span><span class="label label-warning" style="background:#ee2c2c;">Used</span>
                                    </div>
                                </div>
                        {% endfor  %}
                                </div>
			{% endif  %}

                        {% if dnum > 12 %}
                            <div class="block-content collapse in">
			{% for k2,v2 in pl2.items %}
                                <div class="span2">
                                    <div class="chart" data-percent="{{v2}}">{{v2}}</div>
				   <div class="chart-bottom-heading"><span><b>{{k2}}: </b></span><span class="label label-warning" style="background:#ee2c2c;">Used</span>
                                    </div>
                                </div>
                        {% endfor  %}
                                </div>
                        {% endif  %}



                            </div>
                        </div>




                    <div class="row-fluid">
                        <!-- block -->
                        <div class="block">
                            <div class="navbar navbar-inner block-header">
                                <div class="muted pull-left"><b>Memory Status</b></div>
                            </div>
                            <div class="block-content collapse in"> 
                                <div class="span3">
                                    <div class="chart" data-percent="{{pmused}}">{{pmused}}%</div>
				   <div class="chart-bottom-heading"><span><b>Memory: </b></span><span class="label label-warning" style="background:#ee2c2c;">Used</span>
                                    </div>
                                </div>
                                <div class="span3">
                                    <div class="chart" data-percent="{{vmused}}">{{vmused}}%</div>
				   <div class="chart-bottom-heading"><span><b>Swap: </b></span><span class="label label-warning" style="background:#ee2c2c;">Used</span>
                                    </div>
                                </div>
                                </div>

                            </div>
                        </div>



                    <div class="row-fluid">
                        <!-- block -->
                        <div class="block">
                            <div class="navbar navbar-inner block-header">
                                <div class="muted pull-left"><b>CPU Status</b></div>
                            </div>
                            <div class="block-content collapse in"> 
                                <div class="span5 ">
                                    <h5>CPU USED</h5>
                                    <div id="hero-donut" style="height: 250px;"></div>
                        </div>

                                </div>

                            </div>
                        </div>



                </div>
            </div>
 	<link rel="stylesheet" href="{% static 'vendors/morris/morris.css' %}">	
        <script src="{% static 'vendors/jquery.knob.js' %}"></script>
        <script src="{% static 'vendors/raphael-min.js' %}"></script>
        <script src="{% static 'vendors/morris/morris.min.js' %}"></script>
        <script src="{% static 'vendors/flot/jquery.flot.js' %}"></script>
        <script src="{% static 'vendors/flot/jquery.flot.categories.js' %}"></script>
        <script src="{% static 'vendors/flot/jquery.flot.pie.js' %}"></script>
        <script src="{% static 'vendors/flot/jquery.flot.time.js' %}"></script>
        <script src="{% static 'vendors/flot/jquery.flot.stack.js' %}"></script>
        <script src="{% static 'vendors/flot/jquery.flot.resize.js' %}"></script>
  <script>


        // Morris Donut Chart
        Morris.Donut({
            element: 'hero-donut',
            data: [
		{% for k,v in cinfo.items %}
                {label: "{{k}}", value: {{v}} },
		{% endfor %}
            ],
            colors: ["#EEAD0E","#0033cc", "#EE3B3B", "#99ff00","#D15FEE","#9ACD32", "#8B3A3A", "#ff0000"],
            formatter: function (y) { return y  }
        });

        </script>
{% endblock %}




